<template>
    <c-list-template :operation="true" title="供应商用户管理">
        <template slot="search">
            <el-row :gutter="24">
                <el-col :span="7" class="flex-center">
                    <div class="mr-lg">手机号：</div>
                    <el-input placeholder="请输入手机号搜索" v-model="querys.mobile" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="7" class="flex-center">
                    <div class="mr-lg">供应商：</div>
                    <el-input placeholder="请输入供应商名称" v-model="querys.name" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="4" :push="6">
                    <el-button icon="el-icon-search" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button icon="el-icon-delete" style="float:right" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </template>
        <template slot="operation">
            <div class="flex-y-center">
                <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加供应商</el-button>
            </div>
        </template>
        <template slot="list">
            <el-table :header-cell-style='{ background: "#F1F1F1", color:"#092132",height:"58px" }' :row-style='{height:"58px"}' :data="tableData" v-loading="loading">
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="name" label="供应商名称"></el-table-column>
                <el-table-column align="center" prop="legal" label="法人"></el-table-column>
                <el-table-column align="center" prop="mobile" label="手机号"></el-table-column>
                <el-table-column align="center" label="状态">
                    <template slot-scope="scope">
                        <div :class='"statusDot status_"+scope.row.authStatus'></div>{{ authStatusList[scope.row.authStatus].label }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeCreate | dateYMDHMSFormat }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr-lg" @click="handleDetails(scope.row,false,true)" v-if="scope.row.authStatus == 2">详情</el-link>
                        <el-link type="primary" class="mr-lg" @click="handleChargeMoney(scope.row)" v-if="scope.row.authStatus == 2">充值</el-link>
                        <el-link type="primary" class="mr-lg" @click="handleDetails(scope.row,true,false)" v-if="scope.row.authStatus == 1">审核</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </template>

        <c-charge-money ref="cChargeMoney" />
        <c-dealer-form ref="cDealerForm" />
    </c-list-template>
</template>

<script>

import { authStatus } from "@/utils/status";
import cChargeMoney from "./components/c-charge-money.vue";
import cDealerForm from "./components/c-dealer-form.vue";
export default {
    components: {
        cDealerForm,
        cChargeMoney
    },
    data () {
        return {
            querys: {
                mobile: "",
                name: "",
                size: 10,
                current: 1
            },
            loading: false,
            tableData: [],
            total: 0,
            authStatusList: authStatus
        };
    },
    mounted () {
        this.getList()
    },
    methods: {
        handleSearch () {
            this.querys.current = 1;
            this.getList();
        },
        handleReset () {
            this.querys = {
                mobile: "",
                name: "",
                current: 1,
                size: 10,
            };
            this.getList();
        },
        handleSizeChange (val) {
            this.querys.size = val;
            this.getList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            this.getList();
        },
        handleDetails (item, isExamine, isView) {

            // this.$refs.cDealerForm.handleOpen(item);
            this.$router.push({
                path: "/custom/supplier/details",
                query: {
                    isExamine: isExamine,
                    id: item.id,
                    isView: isView
                },
            });
        },
        handleAdd () {
            this.$refs.cDealerForm.handleOpen();
        },
        handleChargeMoney (item) {
            this.$refs.cChargeMoney.handleOpen(item);
        },
        getList () {
            this.loading = true;
            const params = JSON.parse(JSON.stringify(this.querys));
            const url = "/sellerInfo/page";
            this.$get({ url, params }).then((res) => {
                this.tableData = res.records
                this.loading = false;
            });
        }
    }
};
</script>
<style scoped lang="scss">
.statusDot {
    width: 6px;
    height: 6px;
    border-radius: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-left: 70px;
    &.status_1 {
        background: #3a85f5;
    }
    &.status_2 {
        background: #52c41a;
    }
    &.status_3 {
        background: #f5222d;
    }
}
</style>
